<p>The <code>Button</code> element tool allows you to have a custom button rendered at a given position above the element. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:</p>

<table>
    <tr>
        <th>x</th>
        <td rowspan="2"><i>string | number</i></td>
        <td rowspan="2">Use percentage strings (e.g. <code>'40%'</code>) to position the button relatively to the element width/height. A number means distance from the top-left corner of the element. Default is <code>0</code>.</td>
    </tr>
    <tr>
        <th>y</th>
    </tr>
    <tr>
        <th>rotate</th>
        <td><i>boolean</i></td>
        <td>Should the button rotate according to the element angle around the element center? Default is <code>false</code>.</td>
    </tr>
    <tr>
        <th>offset</th>
        <td><i>object</i></td>
        <td>Additional offset of the button from the position defined by <code>x</code> and <code>y</code>. Default is <code>{ x: 0, y: 0 }</code>.</td>
    </tr>
    <tr>
        <th>action</th>
        <td><i>function</i></td>
        <td>What should happen when the user clicks the button? Default is <code>undefined</code> (no interaction).<br><br>

            The callback function is expected to have the signature <code>function(evt, elementView, buttonView)</code> where <code>evt</code> is a <code>jQuery.Event</code> <a href="https://api.jquery.com/category/events/event-object/">object</a>. The element view is available inside the function as <code>this</code>; the element model is available as <code>this.model</code>.</td>
    </tr>
    <tr>
        <th>markup</th>
        <td><i><a href="#dia.Cell.markup.json">JSONMarkup</a></i></td>
        <td>The markup of the button, provided in the <a href="#dia.Cell.markup.json">JointJS JSON format</a>. Default is <code>undefined</code> (no content).</td>
    </tr>
</table>

<p>Example of a useful custom info button:</p>

<pre><code>var infoButton = new joint.elementTools.Button({
    focusOpacity: 0.5,
    // top-right corner
    x: '100%',
    y: '0%'',
    offset: { x: -5, y: -5 },
    action: function(evt) {
        alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
    },
    markup: [{
        tagName: 'circle',
        selector: 'button',
        attributes: {
            'r': 7,
            'fill': '#001DFF',
            'cursor': 'pointer'
        }
    }, {
        tagName: 'path',
        selector: 'icon',
        attributes: {
            'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
            'fill': 'none',
            'stroke': '#FFFFFF',
            'stroke-width': 2,
            'pointer-events': 'none'
        }
    }]
});</code></pre>

<p>The <code>elementTools.Button</code> class can also be extended, to create a reusable custom button type. Then, a new instance of the custom button type can be obtained by calling its constructor:</p>

<pre><code>var InfoButton = joint.elementTools.Button.extend({
    name: 'info-button',
    options: {
        focusOpacity: 0.5,
        distance: 60,
        action: function(evt) {
            alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
        },
        markup: [{
            tagName: 'circle',
            selector: 'button',
            attributes: {
                'r': 7,
                'fill': '#001DFF',
                'cursor': 'pointer'
            }
        }, {
            tagName: 'path',
            selector: 'icon',
            attributes: {
                'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
                'fill': 'none',
                'stroke': '#FFFFFF',
                'stroke-width': 2,
                'pointer-events': 'none'
            }
        }]
    }
});

var infoButton = new InfoButton();</code></pre>
